<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>区域标签</title>
  </head>
  <body>
    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HTML5 语义化标签最佳实践示例</title>
      </head>
      <body>
        <!-- 页头 -->
        <header>
          <h1>欢迎来到我的博客</h1>
          <p>分享知识与见解</p>
        </header>

        <!-- 导航条 -->
        <nav>
          <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#articles">文章</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系</a></li>
          </ul>
        </nav>

        <!-- 网页核心部分 -->
        <main>
          <!-- 核心文章内容 -->
          <article>
            <h2>HTML5 的新特性</h2>
            <p>本文将介绍 HTML5 的一些新特性及其应用场景。</p>

            <!-- 文档中的主题部分 -->
            <section>
              <h3>语义化标签</h3>
              <p>HTML5 引入了语义化标签，如 &lt;header&gt;、&lt;nav&gt;、&lt;main&gt; 等，使网页结构更加清晰。</p>
            </section>

            <section>
              <h3>多媒体支持</h3>
              <p>HTML5 提供了 &lt;video&gt; 和 &lt;audio&gt; 标签，方便嵌入多媒体内容。</p>
            </section>
          </article>

          <!-- 与主要内容相关但可独立的内容 -->
          <aside>
            <h3>相关链接</h3>
            <ul>
              <li>
                <a href="#">MDN HTML 文档</a>
              </li>
              <li>
                <a href="#">W3C HTML 教程</a>
              </li>
            </ul>
          </aside>
        </main>

        <!-- 页脚 -->
        <footer>
          <p>&copy; 2028 我的博客。保留所有权利。</p>
          <p>
            联系方式：
            <a href="mailto:contact@example.com">contact@example.com</a>
          </p>
        </footer>
      </body>
    </html>
  </body>
</html>
